<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->	<html> <!--<![endif]-->
<!-- head -->
<include file="Public:head" />
<!-- head -->
<body class="page">
	<div class="wrap">
		<!-- Header start -->
		<include file="Public:header" />
		<!-- Header End -->

		<!-- Content Start -->
		<div id="main">
			<!-- Title, Breadcrumb Start-->
			<div class="breadcrumb-wrapper">
				<div class="container">
					<div class="row">
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
							<h2 class="title">可用代码</h2>
						</div>
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
							<div class="breadcrumbs pull-right">
								<ul>
									<li>你的位置:</li>
									<li><a href="#">前端工具</a></li>
									<li>可用代码</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Title, Breadcrumb End-->
			<!-- Main Content start-->
			<div class="content">
				<div class="container">
					<div class="row">
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
							<h3 class="title">提醒框工具</h3>
							<div class="alert">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								这是个警告信息提示框
							</div>
							<div class="alert-danger alert">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								这是个错误信息提示框
							</div>
							<div class=" alert-info alert">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								这是个消息提示框
							</div>
							<div class=" alert-success alert">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								这是个成功信息提示框
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">进度条工具</h3>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="85"
									aria-valuemin="0" aria-valuemax="100" style="width: 85%;">PHP
									85%</div>
							</div>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="65"
									aria-valuemin="0" aria-valuemax="100" style="width: 65%;">mysql 65%</div>
							</div>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="90"
									aria-valuemin="0" aria-valuemax="100" style="width: 90%;">HTML/CSS
									90%</div>
							</div>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="60"
									aria-valuemin="0" aria-valuemax="100" style="width: 60%;">SEO
									60%</div>
							</div>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="85"
									aria-valuemin="0" aria-valuemax="100" style="width: 75%;">BootStrap
									85%</div>
							</div>
						</div>
						<div class="clearfix"></div>
						<!-- Left Section End -->
					</div>
					<div class="divider"></div>
					<div class="row">
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<!-- Tab Start -->
							<h3 class="title">选项卡工具</h3>
							<div class="widget tabs">
								<div id="horizontal-tabs">
									<ul class="tabs">
										<li id="tab1" class="current">设计</li>
										<li id="tab2">开发</li>
										<li id="tab3">测试</li>
									</ul>
									<div class="contents">
										<div class="tabscontent" id="content1" style="display: block;">
											<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
										</div>
										<div class="tabscontent" id="content2">
											<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
										</div>
										<div class="tabscontent" id="content3">
											<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。<br>
											这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到ThinkCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
										</div>
									</div>
								</div>
							</div>
							<!-- Tab End -->
						</div>
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">折叠框工具</h3>
							<div class="accordionMod panel-group">
								<div class="accordion-item">
									<h4 class="accordion-toggle">Google</h4>
									<section class="accordion-inner panel-body">
										<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到SimpleCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
									</section>
								</div>
								<div class="accordion-item">
									<h4 class="accordion-toggle">HTML</h4>
									<section class="accordion-inner panel-body">
										<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到SimpleCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
									</section>
								</div>
								<div class="accordion-item">
									<h4 class="accordion-toggle">Ajax</h4>
									<section class="accordion-inner panel-body">
										<p>这是由ThinkCMF提供的前端开发工具包，你可以很方便的将这里的样式或图表集成到SimpleCMF系统中。试用时只要在模板中直接键入相应CSS类即可。</p>
									</section>
								</div>
							</div>
						</div>
					</div>
					<div class="divider"></div>
					<!-- End Second Row -->
					<div class="row">
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">tips工具</h3>
							<div class="tooltips">
								<div class="well">
									<button type="button" class="btn btn-success"
										data-toggle="tooltip" data-placement="right" title=""
										data-original-title="Tooltip on right">Tooltip on
										right</button>
									<button type="button" class="btn btn-success pull-right"
										data-toggle="tooltip" data-placement="left" title=""
										data-original-title="Tooltip on left">Tooltip on left</button>
								</div>
								<div class="well">
									<button type="button" class="btn btn-success"
										data-toggle="tooltip" data-placement="top" title=""
										data-original-title="Tooltip on top">Tooltip on top</button>
									<button type="button" class="btn btn-success pull-right"
										data-toggle="tooltip" data-placement="bottom" title=""
										data-original-title="Tooltip on bottom">Tooltip on
										bottom</button>
								</div>
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">Popovers</h3>
							<div class="well">
								<a id="example" class="btn btn-success" data-rel="popover"
									data-content="It's so simple to create a tooltip for my website!"
									data-original-title="Twitter Bootstrap">Right popover</a> <a
									id="example_left" class="btn btn-success pull-right"
									data-rel="popover"
									data-content="It's so simple to create a tooltop for my website!"
									data-original-title="Twitter Bootstrap">Left popover</a>
							</div>
							<div class="well">
								<a id="example_top" class="btn btn-success" data-rel="popover"
									data-content="It's so simple to create a tooltop for my website!"
									data-original-title="Twitter Bootstrap">Top popover</a> <a
									id="example_bottom" class="btn btn-success pull-right"
									data-rel="popover"
									data-content="It's so simple to create a tooltop for my website!"
									data-original-title="Twitter Bootstrap"> Bottom popover</a>
							</div>
						</div>
					</div>
					<div class="divider"></div>
					<!-- End Third Row -->
					<div class="row">
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">按钮</h3>
							<div class="well">
								<a class="btn-grey btn-small btn-pad" href="#">Small</a> <a
									class="btn-small btn-color btn-pad" href="#">Small</a>
								<div class="clearfix"></div>
								<a class="btn-grey btn-normal btn-pad" href="#">Medium</a> <a
									class="btn-color btn-normal btn-pad" href="#">Medium</a>
								<div class="clearfix"></div>
								<a class="btn-large btn-grey btn-pad" href="#">Large</a> <a
									class="btn-large btn-color btn-pad" href="#">Large</a>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
							<h3 class="title">表格</h3>
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th>Header1</th>
										<th>Header2</th>
										<th>Header3</th>
										<th>Header4</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>item</td>
										<td>item</td>
										<td>item</td>
										<td>item</td>
									</tr>
									<tr>
										<td>item</td>
										<td>item</td>
										<td>item</td>
										<td>item</td>
									</tr>
									<tr>
										<td>item</td>
										<td>item</td>
										<td>item</td>
										<td>item</td>
									</tr>
									<tr>
										<td>item</td>
										<td>item</td>
										<td>item</td>
										<td>item</td>
									</tr>
									<tr>
										<td>item</td>
										<td>item</td>
										<td>item</td>
										<td>item</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="divider"></div>
					<!-- End 4th Row-->
					<div class="row">
						<div class="col-lg-12 col-md-12">
							<h3 class="title">表单元素</h3>
							<div class="row">
								<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
									<input type="text" class="form-control"
										placeholder="Text input"><br>
									<textarea class="form-control" rows="4"></textarea>
									<br>
									<div class="input-group">
										<input type="text" class="form-control"> <span
											class="input-group-btn">
											<button class="btn btn-default" type="button">Go!</button>
										</span>
									</div>
									<!-- /input-group -->
									<br>
									<div class="input-group">
										<input type="text" class="form-control">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Action</a></li>
												<li><a href="#">另一个action</a></li>
												<li><a href="#">其他</a></li>
												<li class="divider"></li>
												<li><a href="#">有一个分割线</a></li>
											</ul>
										</div>
										<!-- /btn-group -->
									</div>
									<!-- /input-group -->
									<br>
									<div class="widget search-form">
										<div class="input-group">
											<input type="text" value="Search..."
												onfocus="if(this.value=='Search...')this.value='';"
												onblur="if(this.value=='')this.value='Search...';"
												class="search-input form-control"> <span
												class="input-group-btn">
												<button type="submit" class="subscribe-btn btn">
													<i class="icon-search"></i>
												</button>
											</span>
										</div>
										<!-- /input-group -->
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6 ">
									<select class="form-control">
										<option>1</option>
										<option>2</option>
										<option>3</option>
										<option>4</option>
										<option>5</option>
									</select> <br>
									<div class="input-group">
										<span class="input-group-addon">@</span> <input type="text"
											class="form-control" placeholder="Username">
									</div>
									<br>
									<div class="input-group">
										<input type="text" class="form-control"> <span
											class="input-group-addon">.00</span>
									</div>
									<br>
									<div class="input-group">
										<span class="input-group-addon">$</span> <input type="text"
											class="form-control"> <span class="input-group-addon">.00</span>
									</div>
									<br> <input class="form-control" id="disabledInput"
										type="text" placeholder="输入框锁定..." disabled><br>
									<div class="checkbox">
										<label> <input type="checkbox" value="">
											多选框
										</label>
									</div>
									<div class="radio">
										<label> <input type="radio" name="optionsRadios"
											id="optionsRadios1" value="option1" checked> 单选
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End 5th Row-->
				</div>
			</div>
		</div>
			<!-- Content End -->

			<!-- Footer Start -->
			<include file="Public:footer" />
			<!-- Footer End -->
			<!-- Scroll To Top -->
			<a href="#" class="scrollup"><i class="icon-angle-up"></i></a>
		</div>
		<!-- Wrap End -->
		<!-- switcher start -->
		<include file="Public:switcher" />
		<!-- switcher end -->
		<!-- The Scripts -->
		<include file="Public:scripts" />
		<!-- The Scripts -->
		</body>
</html>